<template>
    <div class="obligation" v-if="data">
        <div class="goods" v-for="goods in data.list">
            <div class="status">
                <span>2021-08-03</span>
                <span>{{ goods.orderStatusText }}</span>
            </div>
            <template  v-for="list in goods.goodsList">
                <div class="goods-orders">
                    <van-image width="51" height="50" :src="list.picUrl"/>
                    <span class="txt">{{ list.goodsName }}</span>
                    <div class="price">
                        <span>￥{{ list.price }}</span>
                        <span>x {{ list.number }}</span>
                    </div>
                </div>
                <div class="total">
                    <span>共2件</span>
                    <span>应付总额：</span>
                    <span>￥169.00</span>
                </div>
                <div class="btns">
                    <van-button type="default">取消订单</van-button>
                    <van-button type="danger" @click="pay(goods.id)">立即付款</van-button>
                </div>
            </template>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Obligation",
        data() {
            return {
                data: null,
                list: null
            }
        },
        methods: {
            async pay(id) {
                console.log(id)
                await this.$post('order/pay',{
                    orderId: id
                })
                    .then(res => {
                        console.log(res)
                    })
            }
        },
        async created() {
            await this.$get('order/list', {
                showType: 1
            })
                .then(res => {
                    this.data = res.data.data
                    this.list = res.data.data.list
                    console.log(res.data.data)
                })
        }
    }
</script>

<style lang="less" scoped>
  .obligation {
    margin-top: 6px;
    margin-bottom: 20px;
  }

  .goods {

    .status {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 8px;
      padding-bottom: 2px;
      font-size: 13px;
      border-bottom: 1px solid #E8E8E8;

      :first-child {
        margin-left: 10px;
      }

      :last-child {
        margin-right: 14px;
      }
    }

    .goods-orders {
      display: flex;
      flex-direction: row;
      padding-bottom: 16px;
      margin-top: 10px;
      font-size: 12px;
      border-bottom: 1px solid #E8E8E8;

      .van-image {
        margin-left: 28px;
        margin-right: 20px;
      }

      .txt {
        width: 211px;
        height: 34px;
      }

      .price {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 36px;
        color: #4D4D4D;

        :last-child {
          font-size: 11px;
          text-align: right;
        }
      }
    }

    .total {
      margin-top: 7px;
      font-size: 12px;
      color: #5C5C5C;
      text-align: right;

      :first-child {
        margin-right: 4px;
      }

      :nth-child(3) {
        margin-right: 9px;
        color: #E82050;
      }
    }

    .btns {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      margin-top: 10px;

      .van-button {
        margin-right: 10px;
        width: 78px;
        height: 26px;
        font-size: 11px;
        border-radius: 22px;
      }
    }
  }
</style>
